<div class="row">
    <div clsss="col-xs-12">
        <div class="clearfix" style="text-align: right; padding-right: 12px;">
            <div class="btn-group" role="group" aria-label="First group">
                <a class="btn btn-default" data-toggle="modal" role="addFirst" role-tip="添加一级类目" data-target="#editModal"><i class="fa fa-plus"></i></a>
                <button type="button" class="btn btn-default"><i class="fa fa-refresh"></i></button>
            </div>
        </div>
    </div>
</div>
<div class="row" style="margin-top: 10px;">
    <div class="col-xs-12">
        <?php if(isset($items) && $items){ ?>
        <table id="simple-table" class="table table-striped table-bordered table-hover">
            <thead>
                <tr>
                    <th class="center">
                        <label class="pos-rel">
                            <input type="checkbox" class="ace">
                            <span class="lbl"></span>
                        </label>
                    </th>
                    <th>ID</th>
                    <th>文章类目</th>
                    <th>操作</th>
                </tr>
            </thead>

            <tbody>
                <?php foreach ($items as $key => $value) { ?>
                <tr data-id="<?php echo $value->id; ?>" data-parent="<?php echo isset($parent_id) && $parent_id ? $parent_id: 0;?>" data-depth="3">
                    <td class="center">
                        <label class="pos-rel">
                            <input type="checkbox" class="ace">
                            <span class="lbl"></span>
                        </label>
                    </td>

                    <td><?php echo $value->id; ?></td>
                    <td>
                        <?php echo $value->name; ?>
                    </td>
                    <td>
                        <div class="hidden-sm hidden-xs btn-group">
                            <a class="btn btn-xs btn-info" title="编辑" data-toggle="modal" role="edit" role-tip="编辑类目" data-target="#editModal">
                                <i class="ace-icon fa fa-pencil bigger-120"></i>
                            </a>

                            <a class="btn btn-xs btn-success" title="添加子类" data-toggle="modal" role="add" role-tip="添加子类目" data-target="#editModal">
                                <i class="ace-icon fa fa-plus-circle bigger-120"></i>
                            </a>

                            <a class="btn btn-xs btn-danger" title="删除" data-toggle="modal" data-target="#confirmModal">
                                <i class="ace-icon fa fa-trash-o bigger-120"></i>
                            </a>
                        </div>

                        <div class="hidden-md hidden-lg">
                            <div class="inline pos-rel">
                                <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">
                                    <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
                                </button>

                                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
                                    <li>
                                        <a href="#" class="tooltip-info" data-rel="tooltip" title="" data-original-title="View">
                                            <span class="blue">
                                                <i class="ace-icon fa fa-qrcode bigger-120"></i>
                                            </span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="tooltip-success" data-rel="tooltip" title="" data-original-title="Edit">
                                            <span class="green">
                                                <i class="ace-icon fa fa-bar-chart bigger-120"></i>
                                            </span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="tooltip-error" data-rel="tooltip" title="" data-original-title="Delete">
                                            <span class="red">
                                                <i class="ace-icon fa fa-pencil bigger-120"></i>
                                            </span>
                                        </a>
                                    </li>

                                    <li>
                                        <a href="#" class="tooltip-error" data-rel="tooltip" title="" data-original-title="Delete">
                                            <span class="red">
                                                <i class="ace-icon fa fa-trash-o bigger-120"></i>
                                            </span>
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </td>
                </tr>
                	<?php foreach ($value->category as $k => $v) { ?>
                		<tr data-id="<?php echo $v->id; ?>" data-parent="<?php echo $value->id; ?>" data-depth="<?php echo $v->depth;?>">
		                    <td class="center">
		                        <label class="pos-rel">
		                            <input type="checkbox" class="ace">
		                            <span class="lbl"></span>
		                        </label>
		                    </td>

		                    <td><?php echo $v->id; ?></td>
		                    <td>
		                        --<?php echo $v->name; ?>
		                    </td>
		                    <td>
		                        <div class="hidden-sm hidden-xs btn-group">
		                            <a class="btn btn-xs btn-info" title="编辑" data-toggle="modal" role="edit" role-tip="编辑子类目" data-target="#editModal">
		                                <i class="ace-icon fa fa-pencil bigger-120"></i>
		                            </a>

		                            <a class="btn btn-xs btn-danger" title="删除" data-toggle="modal" data-target="#confirmModal">
		                                <i class="ace-icon fa fa-trash-o bigger-120"></i>
		                            </a>
		                        </div>

		                        <div class="hidden-md hidden-lg">
		                            <div class="inline pos-rel">
		                                <button class="btn btn-minier btn-primary dropdown-toggle" data-toggle="dropdown" data-position="auto">
		                                    <i class="ace-icon fa fa-cog icon-only bigger-110"></i>
		                                </button>

		                                <ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">
		                                    <li>
		                                        <a href="#" class="tooltip-info" data-rel="tooltip" title="" data-original-title="View">
		                                            <span class="blue">
		                                                <i class="ace-icon fa fa-qrcode bigger-120"></i>
		                                            </span>
		                                        </a>
		                                    </li>

		                                    <li>
		                                        <a href="#" class="tooltip-success" data-rel="tooltip" title="" data-original-title="Edit">
		                                            <span class="green">
		                                                <i class="ace-icon fa fa-bar-chart bigger-120"></i>
		                                            </span>
		                                        </a>
		                                    </li>

		                                    <li>
		                                        <a href="#" class="tooltip-error" data-rel="tooltip" title="" data-original-title="Delete">
		                                            <span class="red">
		                                                <i class="ace-icon fa fa-pencil bigger-120"></i>
		                                            </span>
		                                        </a>
		                                    </li>

		                                    <li>
		                                        <a href="#" class="tooltip-error" data-rel="tooltip" title="" data-original-title="Delete">
		                                            <span class="red">
		                                                <i class="ace-icon fa fa-trash-o bigger-120"></i>
		                                            </span>
		                                        </a>
		                                    </li>
		                                </ul>
		                            </div>
		                        </div>
		                    </td>
		                </tr>
                	<?php } ?>
                <?php } ?>
            </tbody>
            <?php if(isset($pagination) && $pagination){ ?>
            <tfoot>
                <tr>
                    <td colspan="9" style="text-align: right;">
                        <?php echo isset($pagination) && $pagination ? htmlspecialchars_decode($pagination) : ''; ?>
                    </td>
                </tr>
            </tfoot>
            <?php } ?>
        </table>
        <?php }else{ ?>
        <div style="border: 1px solid #e0e0e0; line-height: 300px; width: 100%; text-align: center;">
            未找到相关数据
        </div>
        <?php } ?>
    </div><!-- /.span -->
</div>

<!-- Modal -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="questionModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="editModalLabel">分类</h4>
      </div>
      <div class="modal-body">
      	<form class="form-horizontal" role="form">
      		<input type="hidden" id="depth" name="depth" value="2">
      		<input type="hidden" id="current_id" name="current_id" value="0">
      		<input type="hidden" id="action" name="action" value="create">
      		<input type="hidden" id="parent" name="parent" value="<?php echo isset($parent_id) && $parent_id ? $parent_id: 0;?>">
      		<div class="form-group">
				<label class="col-sm-3 control-label no-padding-right" for="name"> 分类名称 </label>

				<div class="col-sm-9">
					<input type="text" id="name" name="name" placeholder="请输入分类名称" class="col-xs-10 col-sm-5">
				</div>
			</div>
      	</form>
      </div>
      <div class="modal-footer">
      	<button class="btn btn-info" type="button" id="btn_submit">提交</button>
        <button type="button" class="btn btn-default" id="btnResultClose" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

<?php echo render('ace/public/alert_message'); ?>
<?php echo render('ace/public/confirm_modal'); ?>
<script type="text/javascript">
//触发删除对象的a标签
var a;
//确认删除后的回调方法
function confirmDelete(result) {
    if(result) {
        var i = $(a).find('i');
        var self = $(a).parents('tr');

        $(a).addClass('disabled');
        $(i).addClass('fa-spinner').addClass('fa-spin').removeClass('fa-trash-o');

        $.get('/admin/category/delete/' + self.attr('data-id'), 
            function(data, status){
                $(a).removeClass('disabled');
                $(i).removeClass('fa-spinner').removeClass('fa-spin').addClass('fa-trash-o');
                if(data.status == 'err'){
                    showResultMessage('删除失败', '', 'danger');
                    return;
                }
                showResultMessage('删除成功', '', 'success');
                self.remove();
            }, 'json');
    }
}
</script>

<script type="text/javascript">
$(function(){
	var ynLock = false;
	var parent_id = <?php echo isset($parent_id) && $parent_id ? $parent_id: 0;?>;
	//添加一级分类，编辑，添加二级分类
	$(document).delegate('a[role="addFirst"],a[role="add"],a[role="edit"]','click',function(){
		var obj = $(this);
		var tip = $(this).attr('role-tip');
		var parent = 0;
		var depth = 0;
		var action = 'create';//操作类型(create,edit)
		$('#editModalLabel').text(tip);//设置model标题

		//判断操作类型
		var optionType = $(this).attr('role');

		var url = '/admin/category/create';
        if(optionType == 'addFirst'){
        	parent = parent_id;//本页面变量
            depth = 2;
        }else if(optionType == 'add'){
        	parent = obj.parents('tr').attr('data-id');//
        	depth = 3;
        }else if(optionType == 'edit'){
        	url = '/admin/category/edit/'+ obj.parents('tr').attr('data-id');
        	parent = obj.parents('tr').attr('data-parent');
        	depth = obj.parents('tr').attr('data-depth');
        	$('#current_id').val(obj.parents('tr').attr('data-id'));
        	var name = obj.parents('tr').find('td').eq(2).text();
        	$('#name').val(name.replace(/[ ]/g,""));
        	action = 'edit';
        }

        $('#depth').val(depth);
        $('#parent').val(parent);
        $('#action').val(action);
	});

	$('#btn_submit').click(function(){
		var obj = $(this);
		var tip = $(this).attr('role-tip');
		var parent = $(this).attr('data-parent');
		var depth = 0;
		if(ynLock){
			alert('系统繁忙，请稍候再试！');
			return;
		}

		//判断操作类型
		var optionType = $('#action').val();

		var url = '/admin/category/edit/'+$('#current_id').val();
        if(optionType == 'create'){
            url = '/admin/category/create';
        }
        ynLock = true;
        $.post(url, 
            {
                name: $('#name').val(),
                parent: $('#parent').val(),
                depth: $('#depth').val(),
            },
            function(data, status){
            	ynLock = false;
                if(data.status == 'err'){
                    alert(data.msg);
                }
                window.location.reload();
            }, 'json');
	});
/*
	//按树获取
	$('input[name="nav_type"]').click(function(){
		if(ynLock){
			alert('系统繁忙，请稍候再试！');
			return;
		}
		if($(this).val() == undefined || $(this).val() == 0){
            $('#parent').empty();
            $('#parent').append('<option value="0">请选择</option>');
			return;
		}
		ynLock = true;
        $.get('/admin/category/roots/' + $(this).val(),
            function(data, status){                
            	ynLock = false;
                if(data.status == 'err'){
                    alert(data.msg);
                    return;
                }
                var items = data.data;
                $('#parent').empty();
                $('#parent').append('<option value="0">请选择</option>');
                for(var i = 0; i<items.children.length;i++){
                	$('#parent').append('<option value="' + items.children[i].id + '">'+items.children[i].name+'</option>');
                }
            }, 'json');
    });

	//初始化---上级分类
	$('input[name="nav_type"]').each(function(){
		if($(this).is(":checked")){
			$(this).click();
			return;
		}
	});
*/
})
</script>